<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>events_2</title>
<link href="../../css/common.css" rel="stylesheet"/>
<link href="../../css/meishi.css" rel="stylesheet"/>
<script type="text/javascript" src="../../js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="../../js/jquery.pagination.js"></script>
<script type="text/javascript">
	$().ready(function(){
		//设置照片的数量
		var PHOTOS_COUNT=226;
		//设置每页显示照片的数量
		var PHOTOS_COUNT_PER_PAGE=10;
		
		//对缩略图的文件名进行补零
		function padLeft(str,length){ 
			if(str.length >= length) 
				return str; 
			else 
				return padLeft("0" +str,length); 
		} 
		
		//生成缩略图的DOM
		for(var i=1;i<=PHOTOS_COUNT;i++){
			var thumb='<dl style="display:none"><dt><img src="../photo/20120218/thumbs/'+padLeft(i.toString(),3)+'.jpg" height=“65”/></dt><dd>Introdn Dinner</dd></dl>';
			$('#event-photos-thumbs').append($(thumb));				
		}
		
		//首先先显示前10个
		$('#event-photos-thumbs dl:lt('+PHOTOS_COUNT_PER_PAGE+')').show();
	
		//生成Page的DOM
		var pages=Math.ceil(PHOTOS_COUNT/PHOTOS_COUNT_PER_PAGE);
		//first page
		$('#event-photos-thumbs-pager').append('<a href="#"><</a>');
		for(var i=1;i<=pages;i++){
			var page='<a href="#">'+i.toString()+'</a>';
			$('#event-photos-thumbs-pager').append($(page));
		}
		//latest page
		$('#event-photos-thumbs-pager').append('<a href="#">></a>');		
		//page
		$('#event-photos-thumbs-pager a').click(function(){
			console.log($(this).html());
			return false;
		});
		
		function pageselectCallback(page_index, jq){
		    var max_elem = Math.min((page_index+1) * PHOTOS_COUNT_PER_PAGE, PHOTOS_COUNT);
		    var start=page_index*PHOTOS_COUNT_PER_PAGE;
		    var end=start+PHOTOS_COUNT_PER_PAGE;
		    //先隐藏
		    $('#event-photos-thumbs dl').hide();
		    if(start>0)
			    $('#event-photos-thumbs dl:gt('+(start-1)+'):lt('+PHOTOS_COUNT_PER_PAGE+')').show();
			if(start==0)
				$('#event-photos-thumbs dl:lt('+PHOTOS_COUNT_PER_PAGE+')').show();
		    return false;
		}
		
		function getOptionsFromForm(){
            var opt = {callback: pageselectCallback};
            opt.items_per_page=PHOTOS_COUNT_PER_PAGE;
            opt.num_display_entries=4;
            opt.num_edge_entries=1;
            // Avoid html injections in this demo
            var htmlspecialchars ={ "&":"&amp;", "<":"&lt;", ">":"&gt;", '"':"&quot;"}
            $.each(htmlspecialchars, function(k,v){
        	    if(opt.prev_text!=undefined){
    	            opt.prev_text = opt.prev_text.replace(k,v);
    	        }
                if(opt.next_text!=undefined){
	                opt.next_text = opt.next_text.replace(k,v);
	            }
            })
            return opt;
        }
		
		$("#event-photos-thumbs-pager").pagination(PHOTOS_COUNT, getOptionsFromForm());
		
	});
</script>
</head>

<body id="event-container"> 
<div class="right_title">Event Pictures</div>
        <div class="event_left clearfix">
          <div class="event_t clearfix"></div>
          <div class="event_pic"> <img src="../photo/20120218/photos/001.jpg" width="240"/> </div>
          <div class="event_article">
            <h3>Introduction Dinner</h3>
            <p>Date: Feb 18, 2012</p>
            <p><a href="../photo/20120218/photos/all.zip">Download All Photos</a></p>
          </div>
        </div>
        <div id="event-photos-thumbs-container" class="event_right clearfix">
        	<div id="event-photos-thumbs"></div>
	        <div id="event-photos-thumbs-pager" class="page"></div>
        </div>
        
</body>
</html>
